<template>
  <div class="lottery-data">
    <div class="page-header">
      <h2>双色球开奖数据</h2>
      <el-button type="primary" @click="updateData" :loading="updating">
        更新数据
      </el-button>
    </div>

    <!-- 筛选表单 -->
    <el-card class="filter-card">
      <el-form :model="filterForm" inline>
        <el-form-item label="开始日期">
          <el-date-picker
            v-model="filterForm.start_date"
            type="date"
            placeholder="选择开始日期"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
          />
        </el-form-item>
        
        <el-form-item label="结束日期">
          <el-date-picker
            v-model="filterForm.end_date"
            type="date"
            placeholder="选择结束日期"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
          />
        </el-form-item>
        
        <el-form-item label="期号">
          <el-input
            v-model="filterForm.draw_number"
            placeholder="请输入期号"
            clearable
            style="width: 150px"
          />
        </el-form-item>
        
        <el-form-item label="红球1">
          <el-input-number
            v-model="filterForm.red_ball_1"
            :min="1"
            :max="33"
            placeholder="红球1"
          />
        </el-form-item>
        
        <el-form-item label="红球2">
          <el-input-number
            v-model="filterForm.red_ball_2"
            :min="1"
            :max="33"
            placeholder="红球2"
          />
        </el-form-item>
        
        <el-form-item label="红球3">
          <el-input-number
            v-model="filterForm.red_ball_3"
            :min="1"
            :max="33"
            placeholder="红球3"
          />
        </el-form-item>
        
        <el-form-item label="红球4">
          <el-input-number
            v-model="filterForm.red_ball_4"
            :min="1"
            :max="33"
            placeholder="红球4"
          />
        </el-form-item>
        
        <el-form-item label="红球5">
          <el-input-number
            v-model="filterForm.red_ball_5"
            :min="1"
            :max="33"
            placeholder="红球5"
          />
        </el-form-item>
        
        <el-form-item label="红球6">
          <el-input-number
            v-model="filterForm.red_ball_6"
            :min="1"
            :max="33"
            placeholder="红球6"
          />
        </el-form-item>
        
        <el-form-item label="蓝球">
          <el-input-number
            v-model="filterForm.blue_ball"
            :min="1"
            :max="16"
            placeholder="蓝球"
          />
        </el-form-item>
        
        <el-form-item>
          <el-button type="primary" @click="searchData" :loading="loading">
            查询
          </el-button>
          <el-button @click="resetFilter">
            重置
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 数据表格 -->
    <el-card class="table-card">
      <el-table
        :data="tableData"
        v-loading="loading"
        stripe
        border
        style="width: 100%"
      >
        <el-table-column prop="draw_date" label="开奖日期" width="120" />
        <el-table-column prop="draw_number" label="期号" width="100" />
        <el-table-column label="红球" width="300">
          <template #default="{ row }">
            <span class="red-ball">{{ formatBallNumber(row.red_ball_1) }}</span>
            <span class="red-ball">{{ formatBallNumber(row.red_ball_2) }}</span>
            <span class="red-ball">{{ formatBallNumber(row.red_ball_3) }}</span>
            <span class="red-ball">{{ formatBallNumber(row.red_ball_4) }}</span>
            <span class="red-ball">{{ formatBallNumber(row.red_ball_5) }}</span>
            <span class="red-ball">{{ formatBallNumber(row.red_ball_6) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="蓝球" width="80">
          <template #default="{ row }">
            <span class="blue-ball">{{ formatBallNumber(row.blue_ball) }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="prize_info" label="奖金信息" />
      </el-table>

      <!-- 分页 -->
      <div class="pagination-wrapper">
        <el-pagination
          v-model:current-page="pagination.page"
          v-model:page-size="pagination.size"
          :page-sizes="[10, 20, 50, 100]"
          :total="pagination.total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>
  </div>
</template>

<script>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import api from '@/api'

export default {
  name: 'LotteryData',
  setup() {
    const loading = ref(false)
    const updating = ref(false)
    const tableData = ref([])
    
    const filterForm = reactive({
      start_date: '',
      end_date: '',
      draw_number: '',
      red_ball_1: null,
      red_ball_2: null,
      red_ball_3: null,
      red_ball_4: null,
      red_ball_5: null,
      red_ball_6: null,
      blue_ball: null
    })
    
    const pagination = reactive({
      page: 1,
      size: 20,
      total: 0
    })

    // 格式化球号
    const formatBallNumber = (num) => {
      if (num === null || num === undefined || num === '') {
        return '00'
      }
      return String(num).padStart(2, '0')
    }

    // 加载数据
    const loadData = async () => {
      loading.value = true
      try {
        const params = {
          page: pagination.page,
          per_page: pagination.size,
          ...filterForm
        }
        
        // 移除空值
        Object.keys(params).forEach(key => {
          if (params[key] === '' || params[key] === null || params[key] === undefined) {
            delete params[key]
          }
        })
        
        const response = await api.lottery.getList(params)
        tableData.value = response.data.data || []
        pagination.total = response.data.total || 0
        pagination.page = response.data.current_page || 1
      } catch (error) {
        console.error('加载数据失败:', error)
        ElMessage.error('加载数据失败')
      } finally {
        loading.value = false
      }
    }

    // 更新数据
    const updateData = async () => {
      updating.value = true
      try {
        await api.lottery.update()
        ElMessage.success('数据更新成功')
        loadData()
      } catch (error) {
        console.error('更新数据失败:', error)
        ElMessage.error('更新数据失败')
      } finally {
        updating.value = false
      }
    }

    // 查询数据
    const searchData = () => {
      pagination.page = 1
      loadData()
    }

    // 重置筛选
    const resetFilter = () => {
      filterForm.start_date = ''
      filterForm.end_date = ''
      filterForm.red_ball_1 = null
      filterForm.red_ball_2 = null
      filterForm.red_ball_3 = null
      filterForm.red_ball_4 = null
      filterForm.red_ball_5 = null
      filterForm.red_ball_6 = null
      filterForm.blue_ball = null
      
      pagination.page = 1
      loadData()
      
      ElMessage.success('筛选条件已重置')
    }

    // 分页大小改变
    const handleSizeChange = (size) => {
      pagination.size = size
      pagination.page = 1
      loadData()
    }

    // 当前页改变
    const handleCurrentChange = (page) => {
      pagination.page = page
      loadData()
    }

    onMounted(() => {
      loadData()
    })

    return {
      loading,
      updating,
      tableData,
      filterForm,
      pagination,
      formatBallNumber,
      updateData,
      searchData,
      resetFilter,
      handleSizeChange,
      handleCurrentChange
    }
  }
}
</script>

<style scoped>
.lottery-data {
  padding: 20px;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.page-header h2 {
  margin: 0;
  color: #303133;
}

.filter-card {
  margin-bottom: 20px;
}

.table-card {
  margin-bottom: 20px;
}

.pagination-wrapper {
  margin-top: 20px;
  text-align: right;
}

.red-ball {
  display: inline-block;
  width: 30px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  background-color: #f56c6c;
  color: white;
  border-radius: 50%;
  margin-right: 5px;
  font-size: 12px;
  font-weight: bold;
}

.blue-ball {
  display: inline-block;
  width: 30px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  background-color: #409eff;
  color: white;
  border-radius: 50%;
  font-size: 12px;
  font-weight: bold;
}
</style> 